<template>
  <div class="table-page-search-wrapper">
    <a-form layout="inline">
      <a-row>
        <a-col :md="8" :sm="12" :xs="24" style="padding: 0 8px">
          <a-form-item label="商品名称:">
            <a-input allowClear v-model="searchForm.goodsName" placeholder="请输入商品名称" />
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="12" :xs="24" style="padding: 0 8px">
          <a-form-item label="条形码:">
            <a-input allowClear v-model="searchForm.barCode" @pressEnter="searchAction()" placeholder="请输入条形码" />
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="12" :xs="24" style="padding: 0 8px">
          <a-form-item label="商品状态:">
            <a-select v-model="searchForm.shelfState" placeholder="请选择商品状态" allowClear>
              <a-select-option v-for="item in shelfStateList" :key="item.value" :value="item.value">{{
                item.label
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="12" :xs="24" style="padding: 0 8px">
          <a-form-item label="商品来源:">
            <a-select v-model="searchForm.goodsSource" placeholder="请选择商品来源" @change="goodsSourceChange">
              <a-select-option v-for="item in lgoodsSourceList" :key="item.value" :value="item.value">{{
                item.label
              }}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :md="8" :sm="12" :xs="24" style="padding: 0 8px">
          <a-form-item label="商品类目:">
            <a-cascader
              :options="categoryIdList"
              v-model="pid"
              change-on-select
              placeholder="请选择商品类目"
              @popupVisibleChange="popupVisibleChange"
            ></a-cascader>
          </a-form-item>
        </a-col>
        <!-- <a-col :md="8" :sm="12" :xs="24" style="padding:0 8px;">
          <a-form-item label="商品业态:">
            <a-select v-model="searchForm.businessType" placeholder="请选择商品业态">
              <a-select-option
                v-for="item in xsleList"
                :key="item.value"
                :value="item.value"
              >{{item.label}}</a-select-option>
            </a-select>
          </a-form-item>
        </a-col> -->
        <a-col :md="8" :sm="12" :xs="24" style="padding: 0 8px">
          <a-form-item>
            <a-button type="primary" icon="search" @click="searchAction()">查找</a-button>
            <a-button icon="delete" @click="resetSearch()" style="margin-left: 8px">重置</a-button>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<script>
import { shopgoodscategory, platformgoodscategory } from '@/api/shop/goods.js'
export default {
  name: 'search',
  props: ['keyName'],
  data() {
    return {
      categoryIdList: [], //商品类目
      shelfStateList: [
        {
          label: '下架',
          value: '00',
        },
        {
          label: '上架',
          value: '01',
        },
      ], //商品状态
      lgoodsSourceList: [
        {
          label: '门店自建',
          value: '00',
        },
        {
          label: '平台推送',
          value: '01',
        },
      ], //商品来源
      searchForm: {},
      pid: [],
      xsleList: [
        //业态
        {
          label: '商超',
          value: '02',
        },
        {
          label: '洗衣',
          value: '03',
        },
        {
          label: '家政',
          value: '04',
        },
        {
          label: '咖吧',
          value: '05',
        },
      ],
    }
  },
  mounted() {},
  methods: {
    searchAction() {
      //执行搜索
      this.$emit('search')
    },
    resetSearch() {
      this.categoryIdList = []
      // this.searchForm = {
      //   pid: [],
      // }
      this.pid = []
      this.$emit('resetSearch')
    },
    getSearchForm() {
      //获取高级搜索条件
      return {
        ...this.searchForm,
      }
    },
    goodsSourceChange(e) {
      this.categoryIdList = []
      if (e == '00') {
        shopgoodscategory({}).then((val) => {
          let data = val.data
          this.categoryIdList = data.map((item) => {
            return {
              value: item.categoryId,
              label: item.categoryName,
              children: item.children.map((items) => {
                return {
                  value: items.categoryId,
                  label: items.categoryName,
                }
              }),
            }
          })
          this.$forceUpdate()
        })
      } else {
        platformgoodscategory({}).then((val) => {
          let data = val.data
          this.categoryIdList = data.map((item) => {
            return {
              value: item.categoryId,
              label: item.categoryName,
              children: item.children.map((items) => {
                return {
                  value: items.categoryId,
                  label: items.categoryName,
                }
              }),
            }
          })
          this.$forceUpdate()
        })
      }
    },
    popupVisibleChange(e) {
      if (e && !this.categoryIdList.length) {
        this.$message.warning('请选择商品来源')
      }

      if (this.pid) {
        if (this.pid.length > 1) {
          this.searchForm.categoryId = this.pid[1]
        } else {
          this.searchForm.categoryId = this.pid[0]
        }
      }
    },
  },
}
</script>


<style lang="less">
.table-page-search-wrapper .ant-form-inline .ant-form-item > .ant-form-item-label{
  width: 100px;
}
</style>>
